import {useEffect, useRef, useState} from "react";
import {IconArrowUp, IconFile, IconGallery, IconGlobe, IconHelpCircle, IconMore} from "@douyinfe/semi-icons";
import {Button, Col, Descriptions, Form, Modal, Row, Select, TabPane, Tabs, Tooltip} from "@douyinfe/semi-ui";
import Cmodal_form from "./cmodal_form.jsx";
import {getRoomOrder} from "../../api/api.js";
import Demo from "../../views/Table/BuilderTable/compents/Ant_Map.jsx";

function Builder_modal(props) {
    const [visible, setVisible] = useState(false);
    const [daat,setdaat] = useState([])
    const api = useRef();
    useEffect(()=>{

    },[])
    const showDialog = () => {
        setVisible(true);
        getData();
    };
    async function getData() {
        const form = new FormData()
        form.append("lid",props.name[0].lid)
        form.append("rid",props.name[0].rid)
        form.append("sex",props.name[0].sex2)
        const res = await getRoomOrder(form)
        console.log(res)
        setdaat(res.data.data.builderList)
    }
    const handleOk = () => {
        setVisible(false);
        console.log('Ok button clicked');
    };
    const handleCancel = () => {
        setVisible(false);
        console.log('Cancel button clicked');
    };
    const handleAfterClose = () => {
        console.log('After Close callback executed');
    };
    const dayin = () => {
        console.log(props.info);
    };
    const data = [
        { key: '实际用户数量', value: '1,480,000' },
        {
            key: '7天留存',
            value: (
                <span>
                    98%
                    <IconArrowUp size="small" style={{ color: 'red', marginLeft: '4px' }} />
                </span>
            ),
        },
        { key: '安全等级', value: '3级' },
    ];
    const style = {
        boxShadow: 'var(--semi-shadow-elevated)',
        backgroundColor: 'var(--semi-color-bg-2)',
        borderRadius: '4px',
        padding: '10px',
        marginRight: '20px',
        width: '600px',
    };
    const childRef = useRef();
    const ceshi = ()=>{
        console.log("test")
        console.log(api.current.getValues())
    }
    const list = daat;
    const typelist = [{value:"1",label:"寝室"},{value:"2",label:"淋浴间"},{value:"3",label:"水房"},{value:"4",label:"洗手间"},{value:"5",label:"杂物间"},{value:"6",label:"其他"}];
    const spclist = [{value:"4",label:"四人寝"},{value:"6",label:"六人寝"},{value:"8",label:"八人寝"},]
    return (
        <>
            <Button onClick={showDialog}>修改信息</Button>
            <Modal
                okText={'Sounds great!'}
                style={{width:"30%",height:"54%"}}
                title={<div><IconGallery style={{marginRight:"10px"}} />修改寝室信息</div>}
                visible={visible}
                onOk={handleOk}
                afterClose={handleAfterClose} //>=1.16.0
                onCancel={handleCancel}
                closeOnEsc={true}
                footer={
                    <Button type="primary" onClick={ceshi}>
                        提交
                    </Button>
                }
            >
                <Tabs>
                    <TabPane
                        tab={
                            <span>
                    <IconFile />
                    任务信息
                </span>
                        }
                        itemKey="1"
                    >
                        {<Form getFormApi={formApi => api.current = formApi} layout='horizontal' onValueChange={values=>console.log(values)}>
                            <Row>
                                <Col span={12}> <Form.Input field='rid' label='寝室号' style={{ width: 200 }}/></Col>
                                <Col span={12}> <Form.Select field='lid' label='所在寝室楼' placeholder="请选择所属寝室楼" style={{ width: 180 }} optionList={list}></Form.Select> </Col>
                                <Col span={12}> <Form.Select field='spc' label='寝室规格' placeholder="请选择寝室规格" style={{ width: 180 }} optionList={spclist}></Form.Select></Col>
                                <Col span={12}> <Form.Select field='typee' label='房间类型' placeholder="请选择房间类型" style={{ width: 180 }} optionList={typelist}></Form.Select></Col>
                                {/*<Col span={12}><Form.Select field='spc' label='房间类型' placeholder="请选择业务线" style={{ width: 180 }} optionList={list}></Form.Select></Col>*/}
                                {/*<Button onClick={ceshi}>dweddw</Button>*/}
                            </Row>

                        </Form>}
                    </TabPane>
                    <TabPane
                        tab={
                            <span>
                    <IconGlobe />
                    描述信息
                </span>
                        }
                        itemKey="2"
                    >
                        <Descriptions data={data} row size="large" style={style} />
                    </TabPane>
                </Tabs>
            </Modal>
        </>
    );
}
export default Builder_modal;